<template>
  <p class="divider">
    <slot></slot>
  </p>
</template>

<script>
export default {
}
</script>

<style lang="stylus" scoped>
.divider {
  display: table;
  white-space: nowrap;
  height: auto;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  padding: 10px 0;
  color: #666;
  &:before {
    content: '';
    display: table-cell;
    position: relative;
    top: 50%;
    right: 15px;
    width: 50%;
    background-position: left 1em top 50%;
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-image: url("");
  }
  &:after {
    content: '';
    display: table-cell;
    position: relative;
    top: 50%;
    left: 15px;
    width: 50%;
    background-position: right 1em top 50%;
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-image: url("");
  }
}
</style>

